<template>
  <div
    class="wrapper"
    :class="[animation ? 'animation' : 'animation2']"
    :style="{ top: statusBarHeight * 2 + 72 + 'px' }"
  >
    <div class="content">
      <van-image :src="resource.award_bg_detail_official" class="image-1" />
      <van-image :src="resource.award_bg_detail_official" class="image-2" />
    </div>
  </div>
</template>
<script>
import resource from "@/utils/resource";
export default {
  data() {
    return {
      resource,
      animation: true,
    };
  },
  computed: {
    statusBarHeight() {
      return 20;
    },
  },
};
</script>
<style  scoped>
.wrapper {
  position: fixed;
  left: 0;
  width: 100%;
  height: 3.74rem;
  z-index: 1;
}
.content {
  width: 100%;
  height: 100%;
  position: relative;
}
.image-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.4rem;
  height: 1rem;
}
.image-2 {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 8.4rem;
  height: 1rem;
}

@keyframes moveLeft {
  0% {
    left: 0;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes moveLeft2 {
  0% {
    left: 100%;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.animation {
  animation: moveLeft 15s linear infinite;
}
.animation2 {
  animation: moveLeft2 15s linear infinite;
}
</style>